<template>
	<div>
		<headerTop></headerTop>
		<div class="table-container">
		<el-table
		    :data="tableData"
		    style="width: 100%;margin: 0 auto;border: 1px solid #dfe6ec;"
			:header-cell-style="header">
		    <el-table-column type="expand">
		      <template slot-scope="props">
		        <el-form label-position="left" inline class="demo-table-expand">
		          <el-form-item label="食品名称">
		              <span>{{ props.row.name }}</span>
		            </el-form-item>
		            <el-form-item label="餐馆名称">
		              <span>{{ props.row.shop }}</span>
		            </el-form-item>
		            <el-form-item label="食品 ID">
		              <span>{{ props.row.id }}</span>
		            </el-form-item>
		            <el-form-item label="餐馆 ID">
		              <span>{{ props.row.shopId }}</span>
		            </el-form-item>
		            <el-form-item label="食品介绍">
		              <span>{{ props.row.category }}</span>
		            </el-form-item>
		            <el-form-item label="餐馆地址">
		              <span>{{ props.row.address }}</span>
		            </el-form-item>
		            <el-form-item label="食品评分">
		              <span>{{ props.row.desc }}</span>
		            </el-form-item>
		            <el-form-item label="食品分类">
		              <span>{{ props.row.desc }}</span>
		            </el-form-item>
		            <el-form-item label="月销量">
		              <span>{{ props.row.desc }}</span>
		            </el-form-item>
		          </el-form>
		        </el-form>
		      </template>
		    </el-table-column>
		    <el-table-column
			header-align="center"
			align="center"
		      label="食品名称"
		      prop="id"
			  width="200">
		    </el-table-column>
		    <el-table-column
			header-align="center"
			align="center"
		      label="食品介绍"
		      prop="name"
			  width="400">
		    </el-table-column>
			<el-table-column
			header-align="center"
			align="center"
			  label="评分"
			  prop="name"
			  width="200">
			</el-table-column>
		    <el-table-column header-align="center" align="center" label="操作" width="400">
				<template slot-scope="scope">
				        <el-button
				          size="mini"
				          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						  <el-button
						    size="mini"
						    type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
				      </template>
		    </el-table-column>
		  </el-table>
		  </div>
		  <div class="Pagination" style="text-align: left;margin-top: 10px;margin-left: 30px;">
		      <el-pagination
		        @current-change="handleCurrentChange"
		        :current-page="currentPage"
		        layout="total, prev, pager, next"
		        :total="tableData.length">
		      </el-pagination>
		  </div>
		  <el-dialog title="修改食品信息" :visible.sync="dialogFormVisible">
		    <el-form ref="form" :model="form">
		      <el-form-item label="食品名称" label-width="100px">
		        <el-input v-model="form.name"></el-input>
		      </el-form-item>
		      <el-form-item label="食品介绍" label-width="100px">
		        <el-input></el-input>
		      </el-form-item>
		      <el-form-item label="食品分类" label-width="100px">
		        <el-cascader
		          ></el-cascader>
		      </el-form-item>
		     <el-form-item label="食品图片" label-width="100px">
		         <el-upload
		           class="avatar-uploader"
		           action="https://jsonplaceholder.typicode.com/posts/"
		           :show-file-list="false"
		           :on-success="handleAvatarSuccess"
		           :before-upload="beforeAvatarUpload">
		           <img v-if="imageUrl" :src="imageUrl" class="avatar">
		           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
		         </el-upload>
		     </el-form-item>
			 <el-row style="overflow: auto; text-align: center;">
			     <el-table
			     :data="specs"
			     style="margin-bottom: 20px;">
			 	    <el-table-column
			 	      prop="specs"
			 	      label="规格">
			 	    </el-table-column>
			 	    <el-table-column
			 	      prop="packing_fee"
			 	      label="包装费">
			 	    </el-table-column>
			 	    <el-table-column
			 	      prop="price"
			 	      label="价格">
			 	    </el-table-column>
			 	    <el-table-column label="操作" >
			 	    <template slot-scope="scope">
			 	        <el-button
			 	          size="small"
			 	          type="danger"
			 	          @click="deleteSpecs(scope.$index)">删除</el-button>
			 	    </template>
			 	    </el-table-column>
			 	</el-table>
			 	<el-button type="primary" @click="specsFormVisible = true" style="margin-bottom: 10px;">添加规格</el-button>
				</el-row>
			  <el-form-item>
			     <el-button type="primary" @click="onSubmit">确定</el-button>
			     <el-button @click="dialogFormVisible = false">取消</el-button>
			   </el-form-item>
		    </el-form>
			
			<el-dialog title="添加规格" :visible.sync="specsFormVisible" append-to-body>
			  	<el-form :rules="specsFormrules" :model="specsForm">
				    <el-form-item label="规格" label-width="100px" prop="specs">
				     	<el-input v-model="specsForm.specs" auto-complete="off"></el-input>
				    </el-form-item>
				    <el-form-item label="包装费" label-width="100px">
						<el-input-number v-model="specsForm.packing_fee" :min="0" :max="100"></el-input-number>
					</el-form-item>
					<el-form-item label="价格" label-width="100px">
						<el-input-number v-model="specsForm.price" :min="0" :max="10000"></el-input-number>
					</el-form-item>
			  	</el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="specsFormVisible = false">取 消</el-button>
			    <el-button type="primary" @click="addspecs">确 定</el-button>
			  </div>
			</el-dialog>
			
			
		  </el-dialog>
		  
		  
		  
	</div>
	
	
</template>

<script>
	import headerTop from '../../../components/headerTop.vue'
	import {baseUrl,baseImgpath} from '../../../config/url.js'
	import {getFoods, getFoodsCount, getMenu, updateFood, deleteFood, getResturantDetail, getMenuById} from '../../../api/getData.js'
	export default{
		created(){
			this.restaurant_id = this.$route.query.restaurant_id;
			this.initData()
		},
		methods:{
			async initData(){
				try{
					const res = await getFoods({offset:this.offset,limit:this.limit,restaurant_id:this.restaurant_id})
					let tableData = []
					res.forEach((item , index)=>{
						tableData.name = item.name;
						tableData.item_id = item.item_id;
						tableData.description = item.description;
						tableData.rating = item.rating;
						tableData.month_sales = item.month_sales;
						tableData.restaurant_id = item.restaurant_id;
						tableData.category_id = item.category_id;
						tableData.image_path = item.image_path;
						tableData.specfoods = item.specfoods;
						tableData.index = index;
						this.tableData.push(tableData);
					})
					
				}catch(e){
					//TODO handle the exception
				}
			},
			deleteSpecs(index){
				this.specs.splice(index,1)
			},
			list(){
				return Array.prototype.slice().call(arguments)
			},
			addspecs(){
				// this.specs.push(this.spccc)
				this.specs.push({...this.specsForm})
				this.specsForm.specs = '';
				this.specsForm.packing_fee = 0;
				this.specsForm.price = 20;
				this.specsFormVisible = false;
			},
			//每页条数改变时触发 选择一页显示多少行
			     handleSizeChange(val) {
			         console.log(`每页 ${val} 条`);
			         this.currentPage = 1;
			         this.pageSize = val;
			     },
			     //当前页改变时触发 跳转其他页
			     handleCurrentChange(val) {
			         console.log(`当前页: ${val}`);
			         this.currentPage = val;
			     },
				 handleEdit(index, row) {
					 this.dialogFormVisible = true
				         console.log(index, row);
				},
				handleDelete(index, row) {
				         console.log(index, row);
				},
				onSubmit() {
				        console.log('submit!');
				},
				handleAvatarSuccess(res, file) {
				        this.imageUrl = URL.createObjectURL(file.raw);
				},
				beforeAvatarUpload(file) {
				        const isJPG = file.type === 'image/jpeg';
				        const isLt2M = file.size / 1024 / 1024 < 2;
				
				        if (!isJPG) {
				          this.$message.error('上传头像图片只能是 JPG 格式!');
				        }
				        if (!isLt2M) {
				          this.$message.error('上传头像图片大小不能超过 2MB!');
				        }
				        return isJPG && isLt2M;
				},
		},
		components:{
			headerTop
		},
		computed:{
			specs: function (){
				let specs = [];
				if (this.selectTable.specfoods) {
					this.selectTable.specfoods.forEach(item => {
						specs.push({
							specs: item.specs_name,
							packing_fee: item.packing_fee,
							price: item.price,
						})
					})
				}
				return specs
			},
			spccc:function() {
				return this.specsForm.slice()
			}
		},
		data(){
			return{
				baseUrl,
				baseImgpath,
				specsFormVisible: false,
				dialogFormVisible: false,
				header:{'background-color': '#eef1f6'},
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页的数据条数
				imageUrl: '',
				offset: 0,
				limit: 20,
				restaurant_id: null,
				selectTable:{},
				form: {
				          name: '',
				          region: '',
				          date1: '',
				          date2: '',
				          delivery: false,
				          type: [],
				          resource: '',
				          desc: ''
				},
				tableData: [],
				specsForm: {
				  	specs: '减',
				  	packing_fee: 0,
				  	price: 20,
				},
				specsFormrules: {
					specs: [
						{ required: true, message: '请输入规格', trigger: 'blur' },
					],
				},
			}
		}
	}
</script>

<style lang="scss">
	.demo-table-expand {
	    font-size: 0;
	  }
	  .demo-table-expand label {
	    width: 90px;
	    color: #99a9bf;
	  }
	  .demo-table-expand .el-form-item {
	    margin-right: 0;
	    margin-bottom: 0;
	    width: 50%;
	  }
	  .el-form{
		  margin-left: 50px;
	  }
	   .avatar-uploader .el-upload {
	      border: 1px dashed #d9d9d9;
	      border-radius: 6px;
	      cursor: pointer;
	      position: relative;
	      overflow: hidden;
	    }
	    .avatar-uploader .el-upload:hover {
	      border-color: #409EFF;
	    }
	    .avatar-uploader-icon {
	      font-size: 28px;
	      color: #8c939d;
	      width: 120px;
	      height: 120px;
	      line-height: 120px;
	      text-align: center;
	    }
	    .avatar {
	      width: 120px;
	      height: 120px;
	      display: block;
	    }
</style>
